<template>
  <div class="physical-source-container">
    <el-row class="jvm-info-box" v-if="props.SysExtraMonitor">
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="jvm-info" v-for="(item,index) in propsList" :key="item.key">
        <span class="info-title">{{item.label}}：</span>
        <span :title="props['SysExtraMonitor'][item.key]">{{props['SysExtraMonitor'][item.key]}}</span>
      </el-col>
    </el-row>
    <div class="content-container">
      <el-row class="content-row">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="content-list-col" v-for="(item, index) in contentHtml" :key="index">
          <div class="content-list">
            <p class="content-title">{{ item.title }}</p>
            <v-chart class="content" :options="chartsOptions[item.key]" :autoresize="true"></v-chart>
          </div>
        </el-col>
      </el-row>
      <el-row class="content-bottom">
        <el-col class="content-bottom-col">
          <p class="content-title">磁盘使用量(%)</p>
          <v-chart class="content" :options="chartsOptions['spaceUseRate']" :autoresize="true"></v-chart>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import ECharts from 'vue-echarts';
import {timeLineOption} from './cluster-status-monitor-method'
export default {
  name: "physicalSource",
  components: {
    'v-chart': ECharts
  },
  data() {
    let baseUrl = managerRemoteUrl;
    return {
      urls:{
        getSystemDataUrl: baseUrl + "/monitor/system/getData"
      },
      value: '',
      options: [],
      contentHtml: [
        {title: 'CPU(%)', key: 'systemCpuLoad'},
        {title: '内存(%)', key: 'memoryUseRate'},
        {title: 'CPU负载(%)', key: 'processorCpuLoad'},
        {title: 'Inode使用率(%)', key: 'inodesUseRate'},
        {title: '磁盘吞吐(MB)', key: 'throught'},
        {title: 'IOPS(次)', key: 'iops'},
        {title: '网络接收(kbps)', key: 'networkRecv'},
        {title: '网络推送(kbps)', key: 'networkSend'},
      ],
      data: {}, // 数据
      props: {},
      chartsOptions: {
        systemCpuLoad: {},
        memoryUseRate: {},
        processorCpuLoad: {},
        inodesUseRate: {},
        throught: {},
        iops: {},
        networkRecv: {},
        networkSend: {},
        spaceUseRate: {},
      },
      color: {
        systemCpuLoad: ['#5ebee3', 'rgba(50, 242, 77, 0.8)', 'rgba(50, 242, 77, 0)'],
        memoryUseRate: ['#35b8b9', 'rgba(16, 192, 198, 0.7)', 'rgba(132, 250, 132, 0)'],
        processorCpuLoad: ['#01ccce', 'rgba(7, 255, 239, 0.6)', 'rgba(7, 255, 239, 0)'],
        inodesUseRate: ['#3367e9', 'rgba(64, 118, 255, 0.75)', 'rgba(64, 118, 255, 0.1)'],
        throught: ['#49b6e6', 'rgba(4, 207, 255, 0.5)', 'rgba(49, 164, 254, 0)'],
        iops: ['#539bc8', 'rgba(0, 234, 255, 0.1)', 'rgba(139, 212, 254, 0.1)'],
        networkRecv: ['#3366e1', 'rgba(64, 118, 255, 0.6)', 'rgba(64, 118, 255, 0.1)'],
        networkSend: ['#65e8a5', 'rgba(0, 255, 162, 0.5)', 'rgba(143, 211, 244, 0)'],
        spaceUseRate: ['#03ba1e', 'rgba(50, 242, 77, 0.7)', 'rgba(50, 242, 77, 0)'],
      },
      propsList:[
        {label:"进程数",key:"processorCount"},
        {label:"硬盘大小",key:"totalDisk"},
        {label:"内存大小",key:"totalMemory"}
      ],
      percentageKeys:['systemCpuLoad','memoryUseRate','processorCpuLoad','inodesUseRate','spaceUseRate']
    }
  },
  mounted() {
    this.getOnlineHosts()
  },
  methods: {
    // 获取数据
    getOnlineHosts() {
      this.httpRequest("get", this.urls.getSystemDataUrl, {}, {
        fullSuccess: true
      }).then(res => {
        // console.log("res",res);
        this.data = res.value.data || {};
        this.props = res.value.props || {};
        this.setOption()
      })
    },
    setOption() {
      for (const key in this.data) {
        if(key !== 'collectTime') {
          let max = this.percentageKeys.includes(key) ? 100 : null;
          this.chartsOptions[key] = timeLineOption(this.data['collectTime'] || [], this.data[key] || [], this, this.color[key],max)
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
  @import "../../../assets/styles/base_style";
.physical-source-container {
  width: 100%;
  height: 100%;
  .jvm-info-box{
    padding-bottom: 10px;
    .jvm-info{
      font-size: 15px;
      color: #333;
      border-bottom: 1px dashed #ddd;
      padding: 5px;
      @include ellipsisOneRow;
      .info-title{
        font-weight: bold;
      }
    }
  }
  .content-container {
    width: 100%;
    height: 100%;
    .content-row {
      height: calc(100% - 28%);
      .content-list-col{
        height: calc(100% / 4);
        padding-bottom: 10px;
        .content-list {
          border: 1px solid #4ac4e1;
          height: 100%;
          background: rgba(76, 164, 255, .2);
        }
      }
      .content-list-col:nth-child(odd){
        padding-right: 10px;
      }
      @include mediaScreen(xs) {
        .content-list-col:nth-child(odd){
          padding-right: 0;
        }
      }
    }
    .content-bottom {
      height: 28%;
      border: 1px solid #4ac4e1;
      background: rgba(76, 164, 255, .2);
      .content-bottom-col{
        height: 100%;
      }
    }
    .content-title {
      margin: 0;
      color: #333;
      height: 30px;
      line-height: 30px;
      padding-left: 15px;
      font-size: 15px;
      font-weight: bold;
    }
    .content {
      height: calc(100% - 30px);
      width: 100%;
      overflow: hidden;
    }
  }
}
</style>
